<template>
  <div>
    <el-button size="mini" type="primary">{{ info.label }}</el-button>
    <input
        @click="onClick"
        ref="file"
        class="fileUploaderClass"
        type="file"
        name="file"
        webkitdirectory
        @change.stop="uploadDir"
    />
  </div>
</template>

<script>
  export default {
    props: {
      info: {
        type: Object,
        default: function() {
          return {
            label: "更新照片",
          };
        },
      },
    },
    methods: {
      /**
       * 上传文件夹
       * @param file
       */
      uploadDir(file) {
        if (file === undefined) return;

        const formData = new FormData();
        for (let i = 0; i < this.$refs.file.files.length; i++) {
          formData.append('file', this.$refs.file.files[i]);
        }

        this.$emit("readUpload", formData);
      },

      /**
       * 按钮被点击
       */
      onClick() {
        this.$emit("clickInput");
      },
    }
  };
</script>

<style scoped>
input {
  width: 8vw !important;
  height: 4vh !important;
  position: absolute;
  top: 0;
  color: #ffffff;
  font-size: 0;
  opacity: 0;
}

input:hover {
  cursor: pointer !important;
}
</style>